<template>
	<view class="lj-top-tip u-flex" :class="type">
		<image v-if="showIcon" class="icon" :src="'/static/lj/common/top-tip-'+type+'.png'" mode="aspectFill"></image>
		<view>
			<block v-if="text">{{text}}</block>
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name:"lj-top-tip",
		props:{
			type: {
				type: String,
				default: ""
			},
			text: {
				type: String,
				default: ""
			},
			showIcon: {
				type: Boolean,
				default: true
			},
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="less">
	.lj-top-tip{
		padding: 20rpx 30rpx;
		font-size: 26rpx;
		
		&.info{
			color: #4385ff;
			background-color: #e4ecfb;
		}
		&.success{
			color: #0faf5d;
			background-color: #d8ffeb;
		}
		&.success2{
			color: #1b7631;
			background-color: #c8f7f0;
		}
		&.warning{
			color: #dc830f;
			background-color: #f7ffd8;
		}
		&.danger{
			color: #de513b;
			background-color: #ffe4d8;
		}
		
		.icon{
			display: block;
			width: 33rpx;
			min-width: 33rpx;
			height: 33rpx;
			margin-right: 14rpx;
			margin-top: 4rpx;
		}
	}
</style>
